<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/typo.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/form.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/ui.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/gird.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/jquery.treeview.css" media="screen" />
        <!--[if IE 6]>
            <link rel="stylesheet" type="text/css" href="css/ie6.css"/>
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.5.1.min.js">
        </script>
        <script type="text/javascript" src="js/jquery-fluid.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui.js">
        </script>
        <script type="text/javascript" src="js/jquery.tablesorter.js">
        </script>
        <script type="text/javascript" src="js/jquery.cookie.js">
        </script>
        <script type="text/javascript" src="js/jquery.validate.js">
        </script>
        <script type="text/javascript" src="js/jquery.treeview.min.js">
        </script>
        <script type="text/javascript" src="js/jquery.idTabs.min.js">
        </script>
        <script type="text/javascript" src="js/ui.checkbox.js">
        </script>
        <script type="text/javascript">
            $(function(){
                //Sitebar
                $('#left-menu').sortable({
                    axis: 'y',
                    forcePlaceholderSize: true,
                    placeholder: 'placeholder',
                    cancel: 'li.div-line,#treecontrol,#dashboard'
                });
                $('#form-example').validate({
                    errorElement: "em",
                    errorPlacement: function(error, element){
                        error.appendTo(element.parent('span').parent());
                    }
                });
                $('#left-menu').treeview({
                    animated: "fast",
                    persist: "cookie",
                    collapsed: true,
                    control: "#treecontrol"
                });
                //Date picker
                $("#date").datepicker();
                //Checkbox
                $('input').checkBox();
                $('#toggle-all').click(function(){
                    $('#example input[type=checkbox]').checkBox('toggle');
                    return false;
                });
                $('#check-all').click(function(){
                    $('#example input[type=checkbox]').checkBox('changeCheckStatus', true);
                    return false;
                });
                $('#uncheck-all').click(function(){
                    $('#example input[type=checkbox]').checkBox('changeCheckStatus', false);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="header" class="clearfix">
            <div class="site-head fl">
                <a href="#"><img src="images/logo.png" alt="Logo" class="logo fl" /></a><h1 class="fl site-title"><a href="#">My site</a></h1>
            </div>
            <div class="user-info fr">
                <a href="#" title="Change your avata"><img src="images/ava.png" alt="Ava" class="ava fl" /></a>
                <div class="fl">
                    Welcome, <a href="#" title="Edit your profile"><strong>Xuanlt</strong></a>.
                    <br/>
                    0 messages. <a href="#" class="log-out" title="Log off">Log off</a>
                </div>
            </div>
        </div>
        <div id="main" class="clearfix">
            <div id="content-wrap">
                <div id="content">
                    <div class="sbar clearfix">
                        <div class="mod_info fl">
                            Admin Control Panel 
                            <small>
                                (F5engine v1.0)
                            </small>
                        </div>
                        <div class="quick-search fr">
                            <input type="text" value="Search..." class="input-search fl" /><input type="submit" value="" class="bt-search fr"/>
                        </div>
                    </div>
                    <div class="clearfix content-wrap">
                        <div class="page-title">
                            Style of F5engine
                        </div>
                        <div class="mes-warning">
                            <span class="ui-icon icon icon-warning">&nbsp;</span>
                            <span class="highlight">Latest Message:</span>
                            F5engine v1.02 is now available <a href="#">Read details</a>
                        </div>
                        <br/>
                        <div class="mes-infomation">
                            <span class="ui-icon icon icon-info">&nbsp;</span>Welcome to the admin control panel
                        </div>
                        <br/>
                        <div class="mes-error">
                            <span class="ui-icon icon icon-error">&nbsp;</span>Oop, have something wrong !!!
                        </div>
                        <br/>
                        <div class="mes-success">
                            <span class="ui-icon icon icon-success">&nbsp;</span>Thank you for using F5engine
                        </div>
                        <br/>
                        <div id="example" class="box">
                            <div class="box-header">
                                <h2 class="title">Table style</h2>
                            </div>
                            <div class="table-border-wrap clearfix">
                                <table id="table-sort1" class="tablesorter">
                                    <thead>
                                        <tr>
                                            <th class="cell-check">
                                                <input type="checkbox" />
                                            </th>
                                            <th>
                                                <span class="ui-icon icon-sorting-indicator">&nbsp;</span>
                                                Title
                                            </th>
                                            <th>
                                                <span class="ui-icon icon-sorting-indicator">&nbsp;</span>
                                                Content
                                            </th>
                                            <th class="cell-last">
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input class="cb-element" type="checkbox" />
                                            </td>
                                            <td>
                                                <a href="#">1 Lorem ipsum dolor sit amet</a>
                                            </td>
                                            <td>
                                                1 Pellentesque ante sapien, consequat sed pharetra nec, volutpat sit amet metus ...
                                            </td>
                                            <td>
                                                <a href="#" title="Edit"><span class="ui-icon icon icon-edit">&nbsp;</span>Edit</a>
                                                <a href="#" title="Delete"><span class="ui-icon icon icon-delete">&nbsp;</span>Delete</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input class="cb-element" type="checkbox" />
                                            </td>
                                            <td>
                                                <a href="#">2 Lorem ipsum dolor sit amet</a>
                                            </td>
                                            <td>
                                                2 Pellentesque ante sapien, consequat sed pharetra nec, volutpat sit amet metus ...
                                            </td>
                                            <td>
                                                <a href="#" title="Edit"><span class="ui-icon icon icon-edit">&nbsp;</span>Edit</a>
                                                <a href="#" title="Delete"><span class="ui-icon icon icon-delete">&nbsp;</span>Delete</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <script type="text/javascript">
                                    $(document).ready(function(){
                                        $("#table-sort1").tablesorter({
                                            headers: {
                                                0: {
                                                    sorter: false
                                                },
                                                3: {
                                                    sorter: false
                                                }
                                            }
                                        });
                                    });
                                </script>
                                <div class="clearfix tb-footer">
                                    <span class="number_of_page fl">Showing 1 to 10 <em>of</em> 4 entries</span>
                                    <div class="page-nav clearfix fr">
                                        <a href="#" class="first-page">First</a>
                                        <a href="#">01</a>
                                        <a href="#" class="current">02</a>
                                        <a href="#">03</a>
                                        <a href="#">04</a>
                                        <a href="#">05</a>
                                        <a href="#">...</a>
                                        <a href="#">12</a>
                                        <a href="#">Next &rarr;</a>
                                        <a href="#" class="last-page">Last</a>
                                    </div>
                                </div>
                            </div>
                            <div class="action-bar clearfix">
                                <span class="fl">Select: <button id="toggle-all">Toggle all</button><a id="check-all" href="#">All</a> | <a id="uncheck-all" href="#">None</a></span>
                                <div class="fr">
                                    <span class="input-wrap">
                                        <select>
                                            <option value="Delete">Delete</option>
                                            <option value="Edit">Edit</option>
                                        </select>
                                    </span>&nbsp;<input type="submit" value="Submit" class="ui-button" />
                                </div>
                            </div>
                        </div>
                        <div class="full clearfix">
                            <div class="onehalf fl">
                                <div class="half-left">
                                    <div class="box">
                                        <div class="box-header">
                                            <ul class="idTabs clearfix">
                                                <li>
                                                    <a href="#div1">Tabs style</a>
                                                </li>
                                                <li>
                                                    <a href="#div2">Tabs 2</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="box-content">
                                            <div id="div1">
                                                <h4 class="highlight">Ordered List</h4>
                                                <ol>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                </ol>
                                                <h4 class="highlight">UnOrdered List</h4>
                                                <ul>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                </ul>
                                                <h4 class="highlight">Custom image list</h4>
                                                <ul>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                </ul>
                                                <ul>
                                                    <li>
                                                        Aenean non posuere libero. Aenean ultricies, orci vitae feugiat pulvinar, libero ante imperdiet dolor, nec tincidunt ante ante ac purus.
                                                    </li>
                                                </ul>
                                            </div>
                                            <div id="div2">
                                                <p>
                                                    No data
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="onehalf fr">
                                <div class="half-right">
                                    <div class="box">
                                        <div class="box-header">
                                            <h2 class="title">Form</h2>
                                        </div>
                                        <div class="clearfix box-content">
                                            <form id="form-example" action="#">
                                                <div class="row clearfix">
                                                    <label>
                                                        Your name
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap"><input type="text" id="yourname" name="yourname" value="" class="required" /></span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Email
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap"><input type="text" value="" id="email" name="email" class="required email" /></span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Date picked
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap"><input type="text" value="" id="date" name="date" /></span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Upload
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap"><input type="text" value="Text here" /></span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Select Menu
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap"><input type="text" value="Text here" /></span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Check input
                                                    </label>
                                                    <div class="row-input">
                                                        <input type="checkbox" checked="checked"/>Check box <input type="checkbox"/>Check box 
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Radio boxes
                                                    </label>
                                                    <div class="row-input">
                                                        <input type="radio" name="radio" value="01" checked="checked"/>Radio 01 <input type="radio" name="radio" value="02" />Radio 01
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        Text area
                                                    </label>
                                                    <div class="row-input">
                                                        <span class="input-wrap">
                                                            <textarea cols="1" rows="3">
                                                            </textarea>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="row clearfix">
                                                    <label>
                                                        &nbsp;
                                                    </label>
                                                    <div class="row-input">
                                                        <input type="submit" value="submit" class="ui-button" />
                                                    </div>
                                                </div>
                                            </form>
                                            <script type="text/javascript">
                                                $(document).ready(function(){
                                                    var max = 0;
                                                    $("label").each(function(){
                                                        if ($(this).width() > max) 
                                                            max = $(this).width();
                                                    });
                                                    $("label").width(max);
                                                });
                                            </script>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="box">
                            <div class="box-header">
                                <h2 class="title">Table style</h2>
                            </div>
                            <div class="box-content">
                                <h1>Page title</h1>
                                <p>
                                    This is a demo paragraph. Heading use Lucida Bright font. The content use Lucida San Unicode.
                                </p>
                                <p>
                                    Integer ornare tortor sed diam sollicitudin molestie. Donec justo risus, cursus id interdum non, tempus faucibus nunc. Aenean pulvinar quam vitae tortor mattis volutpat. Fusce vulputate est porta leo congue malesuada. Morbi justo nibh, consequat vitae imperdiet gravida, ornare a sem.
                                </p>
                                <h2>Secondary Heading</h2>
                                <blockquote>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus augue, porta at sollicitudin eget, porttitor id diam. Aliquam iaculis nunc eget lectus ultricies vitae cursus ipsum ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                    </p>
                                </blockquote>
                                <h3>Tertiary Heading</h3>
                                <p>
                                    <span class="highlight">Hightlight text</span>
                                    <br/>
                                    <span class="small">Small text</span>
                                    <br/>
                                    <span class="error">Error message</span>
                                    <br/>
                                    <a href="#">Link text</a>
                                </p>
                                <h4>Mini Text Editor</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="site-bar">
                <ul id="left-menu" class="reset">
                    <li id="treecontrol" class="expand-collapse">
                        <a href="#">Collapse All</a>
                        | <a href="#">Expand All</a>
                    </li>
                    <li id="dashboard" class="box">
                        <p class="reset box-header">
                            <a class="title" title="Dashboard" href="#"><span class="ui-icon icon-menu icon-dashboard">&nbsp;</span>Dashboard</a>
                        </p>
                        <ul class="reset section-menu clearfix">
                            <li class="current">
                                <a title="Dashboard" href="#">Dashboard</a>
                                <span class="arrow">&nbsp;</span>
                            </li>
                            <li>
                                <a title="Update" href="#">Update 
                                    <sup class="ui-bubble">
                                        123
                                    </sup>
                                </a>
                                <span class="arrow">&nbsp;</span>
                            </li>
                        </ul>
                    </li>
                    <li class="div-line">
                        &nbsp;
                    </li>
                    <li class="box">
                        <p class="reset box-header">
                            <a href="#" title="Dashboard" class="title"><span class="ui-icon icon-menu icon-post">&nbsp;</span>Post</a>
                        </p>
                        <ul id="post" class="section-menu clearfix">
                            <li>
                                <a title="Post" href="#">Post</a>
                                <span class="arrow">&nbsp;</span>
                            </li>
                            <li>
                                <a title="Add new" href="#">Add new</a>
                                <span class="arrow">&nbsp;</span>
                            </li>
                            <li>
                                <a title="Tags" href="#">Tags</a>
                                <span class="arrow">&nbsp;</span>
                            </li>
                        </ul>
                    </li>
                    <li class="div-line">
                        &nbsp;
                    </li>
                </ul>
            </div>
        </div>
        <div id="footer">
            Copyright 2011 by <strong>F5engine</strong>. | <a href="#" title="Documentation">Documentation</a>
            | <a href="#" title="Feedback">Feedback</a>
            | <a href="#" title="Mobile Version">Mobile Version</a>
        </div>
    </body>
</html>
